// 1mv = 10mm 
// 1mm = 4px
function ECG (wrapper) {
  var width = wrapper.offsetWidth;
  var height = wrapper.offsetHeight;
  wrapper.style.position = 'relative';
  var ecg = this.createCanvas(width, height);
  var gird =  this.createCanvas(width, height);
  wrapper.appendChild(ecg);
  wrapper.appendChild(gird);

  this.ctx = ecg.getContext('2d');
  this.gird = gird.getContext('2d');
  this.width = width;
  this.height = height;
  this.beforeAxis = {x: 0, y: 0}
  this.isDraw = false;
  // 网格配置
  this.girdSize = 4;
  this.girdLineWidth = 1; 
  this.girdColor = 'rgba(56, 143, 251, .2)';
  // 心电图配置
  this.ecgLineWidth = 2;
  this.ecgLineColor = 'rgba(56, 143, 251, 1)';
  this.ecgInterval = 6; // 走纸速度25mm/s
  this.ecgRate = 4; // 1mv = 10mm 1mm = 4px
  this.ecgDataArr = [];
}

ECG.prototype.createCanvas = function (width, height) {
  var canvas = document.createElement('canvas');
  canvas.width = width;
  canvas.height = height;
  canvas.style.position = 'absolute';
  canvas.style.top = 0;
  canvas.style.left = 0;
  return canvas;
}

// 填充数据
ECG.prototype.setData = function (results) {
  if (!Array.isArray(results)) {
    return 
  }
  this.ecgDataArr.push({
    index: 0,
    lists: results
  })
}

// 获取走纸距离
ECG.prototype.getStep = function () {
  return 1
} 

// 绘制背景网格
ECG.prototype.drawGird = function (size) {
  var ctx = this.gird;
  var that = this;
  var girdSize = size || that.girdSize
  ctx.save();
  ctx.lineWidth = that.girdLineWidth;
  ctx.strokeStyle = that.girdColor;
  ctx.setLineDash([4, 4]);
  // 解决1px 模糊问题
  var offset = that.girdLineWidth / 2;
  ctx.translate(offset, offset);
  // 绘制行
  for (var y = 0; y <= that.height; y += girdSize) {
    ctx.beginPath();
  　ctx.moveTo(0, y);
　  ctx.lineTo(that.width, y);
    ctx.stroke();
  }
  // 绘制列
  for (var x = 0; x <= that.width; x += girdSize) {
    ctx.beginPath();
  　ctx.moveTo(x, 0);
　  ctx.lineTo(x, that.height);
    ctx.stroke();
  }
  ctx.restore();
}

// 绘制心电图
ECG.prototype.drawLine = function () {
  var ctx = this.ctx;
  var that = this;
  var timer = null;
  var step = that.getStep();
  function start () {
    // 数组里面没有数据即表示为绘制完成
    if (that.ecgDataArr.length <= 0) {
      that.isDraw = false;
      return;
    }

    // 总是绘制第一个数据
    var ecgData = that.ecgDataArr[0];
    // 超出之后从原点开始画
    if (that.beforeAxis.x + step > that.width) {
      that.beforeAxis.x = 0
    }
    var currentX = that.beforeAxis.x + step;
    var currentY = - (ecgData.lists[ecgData.index] - 130);
    ctx.save();
    ctx.beginPath();
    ctx.lineWidth = that.ecgLineWidth;
    ctx.strokeStyle = that.ecgLineColor;
    ctx.clearRect(that.beforeAxis.x, 0, step + 4, that.height);
    ctx.translate(0, that.height / 2);
  　ctx.moveTo(that.beforeAxis.x, that.beforeAxis.y);
　  ctx.lineTo(currentX, currentY);
    ctx.stroke();
    ctx.restore();
    ecgData.index ++;

    that.beforeAxis = {
      x: currentX,
      y: currentY
    }
    // 当前数据渲染完成以后从数组中移除
    if (ecgData.lists.length <= ecgData.index) {
      that.ecgDataArr.shift()
    }

    clearTimeout(timer);
    timer = setTimeout(() => {
      start()
    }, that.ecgInterval);
  }
  
  start();
}

ECG.prototype.draw = function () {
  if (this.isDraw) {
    return 
  }
  this.isDraw = true;
  this.drawLine();
}

export default ECG
